<template>
  <div class="current-plus-result">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">购买</x-header>
    </div>
    <div class="dy-body">
      <div class="success-img">
        <img class="success-icon" src="../../../../static/icon/success-arrow.svg">
        <div class="status-msg">购买成功</div>
      </div>
      <div class="info-list">
        <div>
          <p class="msg-title">产品名称</p>
          <p class="data">{{ prdName }}</p>
        </div>
        <div>
          <p class="msg-title">购买金额</p>
          <p class="data">{{ amount }}</p>
        </div>
        <div>
          <p class="msg-title">预期年化收益率</p>
          <p class="data">{{ rate }}</p>
        </div>
      </div>
      <div class="button-group">
        <div><x-button type="primary" @click.native="gotoMain()">继续购买</x-button></div>
        <div><x-button type="primary" @click.native="gotoMyTreasure()">我的财富</x-button></div>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  data () {
    return {
      prdName: '',
      amount: '',
      rate: ''
    }
  },
  methods: {
    gotoMyTreasure () {
      console.log('GOGOGO')
    },
    gotoMain () {
      this.$router.push({name: 'CurrentPlusMain'})
    },
    back () {
      this.$publicFun.goBack(this)
    }
  },
  mounted () {
    this.prdName = this.$route.query.prdName
    this.rate = this.$route.query.rate
    this.amount = this.$route.query.amount
  }
}
</script>

<style lang='less'>
  .current-plus-result{
    .dy-body{
      .success-img{
        .success-icon{
          margin: 1rem 3rem 0.5rem;
          height: 1.4rem;
          width: 1.4rem;
        }
        .status-msg{
          font-size: 0.36rem;
          text-align: center;
        }
      }
      .info-list{
        margin: 1rem 0;
        padding: 0.3rem 0.3rem;
        background: #fff;
        >div{
          display: flex;
          padding: 0.1rem 0;
          >p{
            font-size: 0.3rem;
          }
          .msg-title{
            /*width: 2.3rem;*/
            width: 34%;
          }
          .data{
            /*flex: 1;*/
            width: 64%;
            text-align: right;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap
          }
        }
      }
      .button-group{
        margin: 0 auto;
        >div{
          display: inline-block;
          margin-left: 0.45rem;
          width: 3rem;
        }
      }
    }
  }
</style>
